<template>
    <div class='xtx-goods-page' v-if="goods">
      <div class="container">
        <!-- 面包屑 -->
        <XtxBread>
          <XtxBreadItem to="/">首页</XtxBreadItem>
          <XtxBreadItem  :to="`/category/${goods.categories[1].id}`">{{goods.categories[1].name}}</XtxBreadItem>
          <XtxBreadItem  :to="`/category/sub/${goods.categories[0].id}`">{{goods.categories[0].name}}</XtxBreadItem>
          <XtxBreadItem >{{goods.name}}</XtxBreadItem>
        </XtxBread>
        <!-- 商品信息 -->
        <div class="goods-info">
            <!-- 分左右两块 -->
            <div class="media">
                <!-- 图片 -->
                <GoodsImage :image="goods.mainPictures"/>
                <!-- 销售数据 -->
                <GoodsSales/>
            </div>
            <div class="spec">
                <GoodsName :goods="goods"/>
                <!-- 商品组合 -->
                <GoodsSku :goods="goods" skuId="300284884" @change="changeSku"/>
                <!-- 数量组件 -->
                <XtxNumbox label="数量" :max="goods.inventory" v-model="num"/>
                <!-- 按钮组件 -->
                <XtxButton type="primary" style="margin-top: 20px;" @click="insertCartFn()">加入购物车</XtxButton>
            </div>
        </div>
        <!-- 商品推荐 -->
        <GoodsRelevant v-if="goods" :goodsId="goods.id"/>
        <!-- 商品详情 -->
        <div class="goods-footer">
          <div class="goods-article">
            <!-- 商品+评价 -->
            <GoodsTabs/>
            <!-- 注意事项 -->
            <div class="goods-warn">
              <GoodsWarn/>
            </div>
          </div>
          <!-- 24热榜+专题推荐 -->
          <div class="goods-aside">
            <GoodsHot :goodsId="goods.id" :type="1" />
            <GoodsHot :goodsId="goods.id" :type="2" />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import GoodsSku from './components/goods-sku.vue'
  import GoodsRelevant from './components/goods_relevant.vue'
  import {findGoods} from '@/api/product.js'
import { useRoute } from 'vue-router'
import { nextTick, provide, ref , watch} from 'vue'
import GoodsImage from './components/goods-image.vue'
import GoodsSales from './components/goods_sales.vue'
import GoodsName from './components/goods_name.vue'
import GoodsTabs from './components/goods-tabs.vue'
import GoodsHot from './components/goods-hot.vue'
import GoodsWarn from './components/goods-warn.vue'
import { useStore } from 'vuex'
import { onMounted } from 'vue'
import Message from '@/components/library/xtx-message.js'
  export default {
    name: 'XtxGoodsPage',
    components: { GoodsRelevant,GoodsImage, GoodsSales, GoodsName, GoodsSku , GoodsTabs, GoodsHot, GoodsWarn},
    setup () {
        const num = ref(1)
        const goods = useGoods ()
        const changeSku = (sku) => {
          // 修改商品现价原价库存
          if(sku.skuId) {
            goods.value.price = sku.price
            goods.value.oldPrice = sku.oldPrice
            goods.value.inventory = sku.inventory
          }
          currSku.value = sku
        }

       // 加入购物车
      const store = useStore()
      const currSku = ref(null)
      const insertCartFn = () => {
        if (currSku.value && currSku.value.skuId) {
          // id skuId name attrsText picture price nowPrice selected stock count isEffective
          const { skuId, specsText: attrsText, inventory: stock } = currSku.value
          const { id, name, price, mainPictures } = goods.value
          store.dispatch('cart/insertCart', {
            skuId,
            attrsText,
            stock,
            id,
            name,
            price,
            nowPrice: price,
            picture: mainPictures[0],
            selected: true,
            isEffective: true,
            count: num.value
          }).then(() => {
            Message({ type: 'success', text: '加入购物车成功' })
          })
        } else {
          Message({ text: '请选择完整规格' })
        }
      }

        //提供给后代组件使用的数据
        provide('goods', goods)
        return {goods, changeSku, num, insertCartFn}
    }
  }
  // 获取商品详情
  const useGoods = () => {
        const route = useRoute ()
        const goods = ref(null)
        watch(() => route.params.id, (newVal) => {
            if(newVal && `/product/${newVal}` === route.path) {
                findGoods(route.params.id).then(data => {
                    goods.value = null
                    nextTick(() => {
                        goods.value = data.result
                    })
                })
            }
        }, {immediate: true})
        return goods
    }
  </script>
  
  <style scoped lang='less'>
  .goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
  }
  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
  }
}
  .goods-footer {
    display: flex;
    margin-top: 20px;
    .goods-article {
      width: 940px;
      margin-right: 20px;
    }
    .goods-aside {
      width: 280px;
      min-height: 1000px;
    }
  }
  .goods-tabs {
    min-height: 600px;
    background: #fff;
  }
  .goods-warn {
    min-height: 600px;
    background: #fff;
    margin-top: 20px;
  }
  </style>